<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>产品溯源</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="../../../component/elementUI/index.css">
  <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../style/free.css">
  <style>
    /* 阴影框 */
    .style-box {
      background-color: white;
      margin: 20rem;
      padding: 20rem;
      padding-top: 20rem;
      padding-bottom: 20rem;
      border-radius: 8rem;
      /* 14 */
      box-shadow: 0 2rem 12rem rgba(0, 0, 0, 0.15);
      position: relative;
      overflow: hidden;
      align-items: center;
    }
    
  </style>
</head>
<body>
  <div id="app" v-cloak>
    <el-row :gutter="0">
      <!-- 导航栏 -->
      <el-col :span="24" class="bg-white flex justify-around p border-bottom " >
        <div class="text-center p-2 position-relative text-success font-weight-bold font ">权威检测</div>
        <div class="text-center p-2 position-relative text-666 font">产地信息</div>
        <div class="text-center p-2 position-relative text-666 font">种植环节</div>
        <div class="text-center p-2 position-relative text-666 font">生产企业</div>
      </el-col>
      <!-- 溯源码信息卡片 -->
      <el-col :span="24">
        <div class="style-box" style="top:px;">
          <div class="mx-2 mb-1 text-333 font">您查询的溯源码编号为:<br/>
            <span class="text-center text-dark">{{nodeKey}}</span>
          </div>
          <div class="mx-2 flex align-center justify-end text-green1 font-weight-bold font">核验通过</div>
        </div>
      </el-col>
      <!-- 产品信息 -->
      <el-col :span="24">
        <div class="text-center p-5 ">
          <img class="col-6 mb shadow rounded-circle" style="object-fit: cover;border: 4px solid white; "
            :src="imageApi + formData.articlePic"></img>
          <div class="font-weight-bold text-333 mt-5 mb-3">{{formData.Article_Name || ''}}</div>
          <div class="d-inline-block text-white bg-hover-success m-1 font-sm rounded-lg">
            &emsp;{{formData.Qualification_Category}}&emsp;</div>
          <div class="harvest-time text-green1 font">采收时间: 2025.04.25</div>
        </div>
      </el-col>
      <!-- 认证信息 -->
      <el-col :span="24">
        <div class="">
          <div class=" mx-2 mb-1 font text-333 flex justify-between align-center font-weight-bolder"
            style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
            <span>权威检测</span>
            <div class="mx-2 mb-1 text-green1 font-weight-bold flex align-center ">
              <span class="mr-1">✓</span>可追溯
            </div>
          </div>
          <div class="bg-white m-2 py-2 rounded shadow bg-light position-relative overflow-hidden rounded-lg p-1">
            <div v-for="(item,index) in Qualification_Numbers" :key="index"
              class="mx-2 mb-1 overflow-hidden rounded-lg p-2" style="border: 2px solid #4CAF50;">
              <img class=" rounded mb-3 w-100" :src="imageApi + QualificationPicture_URLs[index]" />
              <div class="text-center">
                <div class=" font-weight-bold text-333 mb-1 w-100
                " >有机产品认证证书</div>
                <div class="font  text-333 mb-1">证书编号: {{item}}</div>
                <div class="font  text-333 mb-1">有效期起: 2024.08.12</div>
                <div class="font  text-333 mb-1">有效期止: 2025.08.11</div>
              </div>              
            </div>
          </div>
        </div>
      </el-col>
      <!-- 产地信息 -->
      <el-col :span="24">
        <div class="">
          <div class=" mx-2 mb-1 font text-333 flex justify-between align-center font-weight-bolder"
            style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
            <span>产地信息</span>
            <div class="mx-2 mb-1 text-green1 font-weight-bold flex align-center ">
              <span class="mr-1">✓</span>可追溯
            </div>
          </div>
          <div class="style-box">
            <div class="text-success font mb-2 text-center">种植地块</div>
            <div class="position-relative w-100 rounded overflow-hidden">
              <yl-map disabled height="300px" :value="formData.Coords"></yl-map>
              <!-- 地图Coords  -->
            </div>
            <div class="mt-2 flex justify-between items-center">
              <div class="text-666 font">{{formData.Traceability_Base_Name}} {{formData.Land_Name}}</div>
              <div class="font-sm text-666 bg-light" style="padding: 0.5rem 1rem;border-radius: 20px;">导航</div>
            </div>
          </div>
          <div class="style-box">
            <div class="text-blue font mb-2 text-center">良心生产，不怕监督，24小时视频监控</div>
            <div class="position-relative w-100 bg-black overflow-hidden" style=" border-radius: 8px;">
              <video style="width:100%;" :src="imageApi + formData.Mp4_Url" controls autoplay loop muted></video>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 种植环节 -->
      <el-col :span="24">
        <div>
          <div class=" mx-2 mb-1 font text-333 flex justify-between align-center font-weight-bolder"
            style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
            <span>种植环节</span>
            <div class="mx-2 mb-1 text-green1 font-weight-bold flex align-center ">
              <span class="mr-1">✓</span>可追溯
            </div>
          </div>
          <div class="style-box flex">
            <img class="mr-2 shadow rounded-circle flex-shrink"
              style="width: 150rem;height: 150rem; object-fit: cover;border: 4px solid white; "
              :src="imageApi + formData1[0].PeoplePicture_URL" alt="管理员头像" />
            <div class="bg-white w-100 rounded shadow">
              <div class="text-333 font-sm m-2 ">我是基地管理员: {{formData1[0].Planting_People_Name}}</div>
              <div class="text-666 font-sm m-2">以下农事操作，是在我的监督下完成</div>
            </div>
          </div>
          <div class="style-box" style="padding-left: 1.5rem;">
            <div class="bg-light position-absolute"
              style="left: 0.6rem;top: 0.8rem; width: 2px;height: calc(100% - 0.8rem);">
            </div>
            <div class="style-box " style="padding-left: 1.5rem;">            
                <el-timeline-item v-for="(activity, index) in formData1" :key="index"
                  :timestamp="activity.Operation_Date">
                  <el-card>
                    {{activity.Operation_Type}}
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
      </el-col>
      <!-- 生产企业 -->
      <el-col :span="24">
        <div>
          <div class=" mx-2 mb-1 font text-333 flex justify-between align-center font-weight-bolder"
            style="margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid #c3bcbc;">
            <span>生产企业</span>
            <div class="mx-2 mb-1 text-green1 font-weight-bold flex align-center ">
              <span class="mr-1">✓</span>可追溯
            </div>
          </div>
          <div class="style-box">
            <div class="mb-4">
              <div class="">
                <div class="text-333 font-weight-bold font text-center">{{formData.Merchant_Name || ''}}</div>
                <div class="text-center bg-warning  text-white rounded-lg mt-2 mb-2 px py  font-small ml-2 ">                
                  <span class=" mr-1">✓</span>已认证
                </div>
              </div>
              <div class="">
                <img class="w-100" style="object-fit: cover;" :src="imageApi + formData.Logo_URL" alt="企业图片" />
                <div class="position-absolute flex"
                  style="bottom: 0.5rem; left: 50%;transform: translateX(-50%); gap: 0.3rem;">
                  <div class="bg-white"></div>
                  <div class="bg-muted" style=" width: 0.5rem; height: 0.5rem; border-radius: 50%;"></div>
                  <div class="bg-muted" style=" width: 0.5rem; height: 0.5rem; border-radius: 50%;"></div>
                  <div class="bg-muted" style=" width: 0.5rem; height: 0.5rem; border-radius: 50%;"></div>
                </div>
              </div>
            </div>
            <div class="text-666 font-sm mb-4 leading-relaxed">{{formData.Memo}}</div>
            <!-- <div class="flex justify-around">
                <div class="text-center">
                    <div class="contact-icon bg-purple-dark mx-auto mb-1" >
                      <img style="height:30px;" :src="imageApi + formData.merchantPicture_URL "/>
                    </div>
                    <div class="text-666 font-small">营业执照</div>
                    <div class="text-success font-small">已核验</div>
                </div>
                <div class="text-center">
                    <div class="contact-icon bg-blue mx-auto mb-1">📞</div>
                    <div class="text-666 font-small">客服电话</div>
                </div>
            </div> -->
          </div>
        </div>
      </el-col>
    </el-row>
  </div>


  <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
  <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
  <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../../utils/jweixin.js"></script>
  <script type="text/javascript" src="../../../utils/components.js"></script>
  <script type="text/javascript" src="../../../utils/compressor.js"></script>
  <script type="text/javascript" src="../../../utils/validity.js"></script>
  <script type="text/javascript" src="../../../utils/utils.js"></script>
  <script type="text/javascript" src="../../../utils/http.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>